body {
	margin: 0;
	padding: 0;
	background-color: #43BDD2;
          font-family: "Microsoft YaHei";
          font-size: 12px;
}

.load_page{
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          background-color:#43BDD2;
}

.load_page .load_logo{
        margin: 16% auto 6%;
}

.load_box{
          position: relative;
          top:6%;
          left: 50%;
          margin-left: -100px;
          width: 200px;
}

.load_block{
          width: 30px;
          height: 17px;
          position: absolute;
          top: 2px;
          left: 3px;
}

.load_block1{
          width: 195px;
          height: 17px;
          position: absolute;
          top: 2px;
          left: 3px;
}

.loading_word{
          width: 40%;
          position: relative;
          top:8%;
          left: 50%;
          margin-left: -20%;
}

.loading_word img{
          width: 100%;
}

.indexPage{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(../images/redBag.png) no-repeat;
	background-size: 100% 100%;
          display: none;
}

.s_logo{
	margin: 2.5%;
	height: 26px;
	margin-bottom: 3.333%;
}

.s_logo img{
	height: 100%;
}

.logo{
	width: 87%;
	margin: 0 auto;
}

.logo img{
	width: 100%;
}

.action_1 img{
	opacity: 0;
	animation: 1s bounced-word forwards;
	-moz-animation:1s bounced-word forwards;
	-webkit-animation: 1s bounced-word forwards;
	-o-animation: 1s bounced-word forwards;
	-ms-animation: 1s bounced-word forwards;
}

@keyframes bounced-word {
    0% {
    	opacity: 1;
	-webkit-transform: translate3d(0, -60px, 0) scaleY(1);
	transform: translate3d(0, -60px, 0) scaleY(1);
        	-moz-transform:translate3d(0, -60px, 0) scaleY(1);
        	-o-transform:translate3d(0, -60px, 0) scaleY(1);
        	-ms-transform:translate3d(0, -60px, 0) scaleY(1);
    }

    40% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(0.6);
	transform: translate3d(0, 0, 0) scaleY(0.6);
        	-moz-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-o-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-ms-transform:translate3d(0, 0, 0) scaleY(0.6);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }

    50% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1.2);
	transform: translate3d(0, 0, 0) scaleY(1.2);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-o-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1.2);

       	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    60% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1);
	transform: translate3d(0, 0, 0) scaleY(1);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1);
        	-o-transform:translate3d(0, 0, 0) scaleY(1);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    100% {
        opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	-o-transform: translate3d(0, 0, 0);
        	-ms-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes bounced-word {
    0% {
    	opacity: 1;
	-webkit-transform: translate3d(0, -60px, 0) scaleY(1);
	transform: translate3d(0, -60px, 0) scaleY(1);
        	-moz-transform:translate3d(0, -60px, 0) scaleY(1);
        	-o-transform:translate3d(0, -60px, 0) scaleY(1);
        	-ms-transform:translate3d(0, -60px, 0) scaleY(1);
    }

    40% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(0.6);
	transform: translate3d(0, 0, 0) scaleY(0.6);
        	-moz-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-o-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-ms-transform:translate3d(0, 0, 0) scaleY(0.6);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }

    50% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1.2);
	transform: translate3d(0, 0, 0) scaleY(1.2);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-o-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1.2);

       	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    60% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1);
	transform: translate3d(0, 0, 0) scaleY(1);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1);
        	-o-transform:translate3d(0, 0, 0) scaleY(1);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    100% {
        opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	-o-transform: translate3d(0, 0, 0);
        	-ms-transform: translate3d(0, 0, 0);
    }
}

@-moz-keyframes bounced-word {
    0% {
    	opacity: 1;
	-webkit-transform: translate3d(0, -60px, 0) scaleY(1);
	transform: translate3d(0, -60px, 0) scaleY(1);
        	-moz-transform:translate3d(0, -60px, 0) scaleY(1);
        	-o-transform:translate3d(0, -60px, 0) scaleY(1);
        	-ms-transform:translate3d(0, -60px, 0) scaleY(1);
    }

    40% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(0.6);
	transform: translate3d(0, 0, 0) scaleY(0.6);
        	-moz-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-o-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-ms-transform:translate3d(0, 0, 0) scaleY(0.6);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }

    50% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1.2);
	transform: translate3d(0, 0, 0) scaleY(1.2);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-o-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1.2);

       	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    60% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1);
	transform: translate3d(0, 0, 0) scaleY(1);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1);
        	-o-transform:translate3d(0, 0, 0) scaleY(1);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    100% {
        opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	-o-transform: translate3d(0, 0, 0);
        	-ms-transform: translate3d(0, 0, 0);
    }
}

@-o-keyframes bounced-word {
    0% {
    	opacity: 1;
	-webkit-transform: translate3d(0, -60px, 0) scaleY(1);
	transform: translate3d(0, -60px, 0) scaleY(1);
        	-moz-transform:translate3d(0, -60px, 0) scaleY(1);
        	-o-transform:translate3d(0, -60px, 0) scaleY(1);
        	-ms-transform:translate3d(0, -60px, 0) scaleY(1);
    }

    40% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(0.6);
	transform: translate3d(0, 0, 0) scaleY(0.6);
        	-moz-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-o-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-ms-transform:translate3d(0, 0, 0) scaleY(0.6);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }

    50% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1.2);
	transform: translate3d(0, 0, 0) scaleY(1.2);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-o-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1.2);

       	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    60% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1);
	transform: translate3d(0, 0, 0) scaleY(1);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1);
        	-o-transform:translate3d(0, 0, 0) scaleY(1);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    100% {
        opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	-o-transform: translate3d(0, 0, 0);
        	-ms-transform: translate3d(0, 0, 0);
    }
}

@-ms-keyframes bounced-word {
    0% {
    	opacity: 1;
	-webkit-transform: translate3d(0, -60px, 0) scaleY(1);
	transform: translate3d(0, -60px, 0) scaleY(1);
        	-moz-transform:translate3d(0, -60px, 0) scaleY(1);
        	-o-transform:translate3d(0, -60px, 0) scaleY(1);
        	-ms-transform:translate3d(0, -60px, 0) scaleY(1);
    }

    40% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(0.6);
	transform: translate3d(0, 0, 0) scaleY(0.6);
        	-moz-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-o-transform:translate3d(0, 0, 0) scaleY(0.6);
        	-ms-transform:translate3d(0, 0, 0) scaleY(0.6);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }

    50% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1.2);
	transform: translate3d(0, 0, 0) scaleY(1.2);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-o-transform:translate3d(0, 0, 0) scaleY(1.2);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1.2);

       	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    60% {
    	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scaleY(1);
	transform: translate3d(0, 0, 0) scaleY(1);
        	-moz-transform:translate3d(0, 0, 0) scaleY(1);
        	-o-transform:translate3d(0, 0, 0) scaleY(1);
        	-ms-transform:translate3d(0, 0, 0) scaleY(1);

        	transform-origin: left bottom 0;
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
    }
    100% {
        opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	-o-transform: translate3d(0, 0, 0);
        	-ms-transform: translate3d(0, 0, 0);
    }
}

.mobile{
          position: absolute;
          bottom: 18%;
          left: 50%;
          margin-left: -35%;
          width: 70%;
}

.mobile img{
          width: 100%;
}

.action_2 img{
          opacity: 0;
          animation: turnout 1s 1s forwards;
          -moz-animation: turnout 1s 1s forwards;
          -webkit-animation: turnout 1s 1s forwards;
          -o-animation: turnout 1s 1s forwards;
          -ms-animation: turnout 1s 1s forwards;
}

@keyframes turnout{
        0%{transform:scale(0.2);opacity: 0;}
        50%{transform:scale(1.2);opacity: 1;}
        100%{transform:scale(1);opacity: 1;}
}

@-moz-keyframes turnout{
        0%{-moz-transform:scale(0.2);opacity: 0;}
        50%{-moz-transform:scale(1.2);opacity: 1;}
        100%{-moz-transform:scale(1);opacity: 1;}
}

@-webkit-keyframes turnout{
        0%{-webkit-transform:scale(0.2);opacity: 0;}
        50%{-webkit-transform:scale(1.2);opacity: 1;}
        100%{-webkit-transform:scale(1);opacity: 1;}
}

@-o-keyframes turnout{
        0%{-o-transform:scale(0.2);opacity: 0;}
        50%{-o-transform:scale(1.2);opacity: 1;}
        100%{-o-transform:scale(1);opacity: 1;}
}

@-ms-keyframes turnout{
        0%{-ms-transform:scale(0.2);opacity: 0;}
        50%{-ms-transform:scale(1.2);opacity: 1;}
        100%{-ms-transform:scale(1);opacity: 1;}
}

.button{
        position: absolute;
        bottom: 4%;
        width: 64%;
        margin: 0px 18%;
        text-align: center;
        opacity: 0;
        animation: turnoutt 0.8s 2s forwards;
        -moz-animation: turnoutt 0.8s 2s forwards;
        -webkit-animation: turnoutt 0.8s 2s forwards;
        -o-animation: turnoutt 0.8s 2s forwards;
        -ms-animation: turnoutt 0.8s 2s forwards;
}

@keyframes turnoutt{
        0%{transform:scale(0.2);opacity: 0;bottom: 0;}
        100%{transform:scale(1);opacity: 1;bottom: 4%;}
}

@-moz-keyframes turnoutt{
        0%{transform:scale(0.2);opacity: 0;bottom: 0;}
        100%{transform:scale(1);opacity: 1;bottom: 4%;}
}

@-webkit-keyframes turnoutt{
        0%{transform:scale(0.2);opacity: 0;bottom: 0;}
        100%{transform:scale(1);opacity: 1;bottom: 4%;}
}

@-o-keyframes turnoutt{
        0%{transform:scale(0.2);opacity: 0;bottom: 0;}
        100%{transform:scale(1);opacity: 1;bottom: 4%;}
}

@-ms-keyframes turnoutt{
        0%{transform:scale(0.2);opacity: 0;bottom: 0;}
        100%{transform:scale(1);opacity: 1;bottom: 4%;}
}

.btn1{
        float: left;
        width: 48%;
        margin-right: 4%;
        border-radius: 6px;
        overflow: hidden;
}

.btn1 img{
        width: 100%;
        float: left;
}

.btn2{
        float: left;
        width: 48%;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 4%;
}

.btn2 img{
        width: 100%;
        float: left;
}

.btn3{
        width: 52%;
        margin: 0px 24%;
        border-radius: 6px;
        overflow: hidden;
}

.btn3 img{
        width: 100%;
        float: left;
}

.box{
        transition:border linear .2s,box-shadow linear .5s;    /*border属性的逐步过渡，而后面则是对阴影部分的逐步过渡*/
        -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
        -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
        -o-transition:border linear .2s,-o-box-shadow linear .5s;
        -ms-transition:border linear .2s,-ms-box-shadow linear .5s;
        outline:none;
        box-shadow:0 0 20px rgba(255,255,255,.5);
        -moz-box-shadow:0 0 20px rgba(255,255,255,.5);
        -webkit-box-shadow:0 0 20px rgba(255,255,255,3);
        -o-box-shadow:0 0 20px rgba(255,255,255,3);
        -ms-box-shadow:0 0 20px rgba(255,255,255,3);
}

/*优惠券*/

.pageOne{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url(../images/o_bg.png);
        display: none;
}

.context{
        width: 60%;
        margin: 4% 0px 14% 14%;
        opacity: 0;
         animation: hua 0.4s 0.5s forwards;
        -moz-animation: hua 0.4s 0.5s forwards;
        -webkit-animation: hua 0.4s 0.5s forwards;
        -o-animation: hua 0.4s 0.5s forwards;
        -ms-animation: hua 0.4s 0.5s forwards;
}

@keyframes hua{
        0%{margin-left:-14%;opacity:0;}
        80%{margin-left:14%;transform:skewX(-30deg);opacity: 1;}
        100%{margin-left:14%;opacity: 1;}
}

@-moz-keyframes hua{
        0%{margin-left:-14%;opacity:0;}
        80%{margin-left:14%;transform:skewX(-30deg);opacity: 1;}
        100%{margin-left:14%;opacity: 1;}
}

@-webkit-keyframes hua{
         0%{margin-left:-14%;opacity:0;}
        80%{margin-left:14%;transform:skewX(-30deg);opacity: 1;}
        100%{margin-left:14%;opacity: 1;}
}

@-o-keyframes hua{
         0%{margin-left:-14%;opacity:0;}
        80%{margin-left:14%;transform:skewX(-30deg);opacity: 1;}
        100%{margin-left:14%;opacity: 1;}
}

@-ms-keyframes hua{
         0%{margin-left:-14%;opacity:0;}
        80%{margin-left:14%;transform:skewX(-30deg);opacity: 1;}
        100%{margin-left:14%;opacity: 1;}
}

.context img{
        width: 100%;
}

.red_box{
        width: 72%;
        margin: auto;
        position: relative;
}

.red_box img{
        width: 104%;
}

.reaBag{
        position: absolute;
        top: 0px;
        left: 50%;
        width: 70%;
        margin: -18% auto 0px;
        margin-left: -33%;
        opacity: 0;
        animation: turnout 1s 1s forwards;
        -moz-animation: turnout 1s 1s forwards;
        -webkit-animation: turnout 1s 1s forwards;
        -o-animation: turnout 1s 1s forwards;
        -ms-animation: turnout 1s 1s forwards;
}

.reaBag img{
        width: 100%;
}

.num{
        position: absolute;
        bottom: 30%;
        width: 37%;
        height: 39%;
        text-align: center;
        left: 45%;
        background-color: #fff;
        margin-left: -15%;
        border-radius: 50%;
}

.num p{
        position:absolute; 
        font-size: 2em;
        color: #FF4723;
        font-weight: bolder;
        height: 38%;
        width: 100%;
        top: 50%;
        left: 50%;
        margin-top: -23%;
        margin-left: -50%;
}

.num p span{
        font-size: 12px;
}

.close_bt{
        width: 20%;
        position: absolute;
        top: -6%;
        right: -10%;
}

.btn4{
        width: 46%;
        margin: 4% auto;
        overflow: hidden;
        border-radius: 6px;
}

.btn4:after{
        content: "";
        display: block;
        clear: both;
}

.btn4 img{
        width: 100%;
        float: left;
        opacity: 0;
         animation: turnoutt 1s 1.8s forwards;
        -moz-animation: turnoutt 1s 1.8s forwards;
        -webkit-animation: turnoutt 1s 1.8s forwards;
        -o-animation: turnoutt 1s 1.8s forwards;
        -ms-animation: turnoutt 1s 1.8s forwards;
}

.intro{
        position: absolute;
        width: 104%;
        top: 39%;
}

.intro_title{
        background-color: #FFFE02;
        border-radius: 18px;
        overflow: hidden;
        width: 38%;
        margin-left: 8%;
}

.intro_title span{
        color: #D6220D;
        font-weight: bold;
        display: block;
        padding: 0px 14px 0px 8px;
        border-radius: 18px;
        font-size: 12px;
}

.detail{
        padding: 4px 10px;
}

.intro .detail p{
       margin: 2px 0 0;
       text-indent: justify;
       line-height: 16px;
       color: #fff;
}

.explain{
        position: absolute;
        bottom: 3%;
        right: 0px;
        text-align: right;
}

.explain p{
        margin: 0px;
        color: #fff;
}

/*成功领取页*/
.receivePage{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url(../images/o_bg.png);
        display: none;
}

.receivePic{
        position: absolute;
        width: 52%;
        top: 24%;
        left: 50%;
        margin-left: -26%;
}

.receivePic img{
        width: 100%;
}

.closeBtn{
        position: absolute;
        width: 30%;
        top: -10%;
        right: -10%;
        margin-left: -10%;
}

.closeBtn img{
        width: 100%;
}

/*扫码说明页*/
.rulePage{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url(../images/o_bg.png);
        display: none;
}

.rulePic{
        width: 76%;
        position: absolute;
        top: 14%;
        left: 50%;
        margin-left: -38%;
        opacity: 0;
        animation: huas 0.5s  forwards;
        -moz-animation: huas 0.5s  forwards;
        -webkit-animation: huas 0.5s  forwards;
        -o-animation: huas 0.5s  forwards;
        -ms-animation: huas 0.5s  forwards;
}

.rulePic img{
        width: 100%;
}

@keyframes huas{
        0%{top: 100%;opacity:0;}
        100%{top: 14%;opacity: 1;}
}

@-moz-keyframes huas{
         0%{top: 100%;opacity:0;}
        100%{top: 14%;opacity: 1;}
}

@-webkit-keyframes huas{
        0%{top: 100%;opacity:0;}
        100%{top: 14%;opacity: 1;}
}

@-o-keyframes huas{
          0%{top: 100%;opacity:0;}
        100%{top: 14%;opacity: 1;}
}

@-ms-keyframes huas{
          0%{top: 100%;opacity:0;}
        100%{top: 14%;opacity: 1;}
}

.closePic{
        position: absolute;
        width: 20%;
        bottom: 3%;
        left: 50%;
        margin-left: -10%;
}

.closePic img{
        width: 100%;
}

/*点击我要使用后的温馨提示页面 */
.tipsPage{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url(../images/o_bg.png);
        display: none;
}

.tipsPic{
        width: 68%;
        position: absolute;
        top: 22%;
        left: 50%;
        margin-left: -34%;
}

.tipsPic img{
        width: 100%;
}

.use_btn{
        position: absolute;
        width: 44%;
        margin-left: 5%;
        top: 72%;
        border-radius: 6px;
        overflow: hidden;
}

.use_btn img{
        width: 100%;
        float: left;
}

.nouse_btn{
        position: absolute;
        width: 44%;
        margin-right: 5%;
        top: 72%;
        right: 0px;
        border-radius: 6px;
        overflow: hidden;      
}

.nouse_btn img{
        width: 100%;
        float: left;
}

/*分享页*/
.sharePage{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url(../images/o_bg.png);
        display: none;
}

.shareContent{
        width: 86%;
        position: absolute;
        top: 10%;
        left: 50%;
        margin-left: -43%;
}

.shareContent img{
        width: 100%;
}

.btn6{
       /* display: none;*/
}

.btn4_clicked{
        opacity: 0px;
       /* display:none;*/
}


.yf-display {
	display: none;
}

@media (min-aspect-ratio: 328/480){
          .mobile{
                    width: 64%;
                    margin-left: -32%;
          }
          .red_box {
                    width: 64%;
                    margin: auto;
                    position: relative;
          }
          .context{
                    margin-bottom: 12%;
          }
          .btn4{
                    margin-top: 3%;
          }
}


@media screen and (max-height: 567px){
          .logo{
                    margin-top: -8%;
                    width: 82%;
          }
          .mobile{
                    width: 68%;
                    margin-left: -34%;
          }
}

@media screen and (min-height: 510px) and (max-height: 567px){
          .mobile{
                  width: 68%;
                  margin-left: -34%;
          }
}

@media screen and (min-width:320px){
          .logo{
                    margin-top: -10%;
          }

}

@media screen and (min-height: 667px){
           .intro_title span{
                  font-size: 14px;
           }
           .explain p{
                  font-size: 14px;
          }
           .intro .detail p{
                  line-height: 18px;
                  font-size: 14px;
          }
          .btn4{
                  margin: 8% auto;
          }
          .mobile{
                  width: 76%;
                  margin-left: -38%;
          }
          .logo {
                  margin-top: -4%;
          }
}

@media screen and (max-height:450px){
          .mobile{
                    width: 60%;
                    margin-left: -30%;
          }
}    

@media (min-aspect-ratio: 386/522){
          .mobile {
                    width: 64%;
                    margin-left: -32%;
          }
}
